<!-- 页面左侧布局组件 - 提供左侧边栏导航的页面布局结构 -->
<template>
  <!-- 主背景容器 -->
  <div class="page-layout">
    <!-- 侧边栏 -->
    <aside class="sidebar">
      <!-- 侧边栏内容区域 - 暂时留空，后续可根据需求添加 -->
      <slot name="sidebar"></slot>
    </aside>
    
    <!-- 主内容区域 -->
    <main class="content">
      <!-- 主内容插槽 -->
      <slot></slot>
    </main>
  </div>
  
  <!-- 面包屑导航示例 -->
  <div class="breadcrumb-demo">
    <h3>面包屑导航示例：</h3>
    <Breadcrumb :items="breadcrumbItems" />
  </div>
</template>

<script setup lang="ts">
// 侧边栏页面布局组件
// 提供基本的页面结构，包含主背景、侧边栏和内容区域

// 导入面包屑导航组件用于示例展示
import Breadcrumb from './common/Breadcrumb.vue'

// 示例面包屑数据
const breadcrumbItems = [
  { label: '首页', path: '/' },
  { label: '登录', path: '/login' },
  { label: '用户管理' }
]
</script>

<style scoped>
/* 主背景容器样式 */
.page-layout {
  display: flex;
  width: 100vw;
  height: 100vh;
  background-color: #f5f5f5;
  overflow: hidden;
}

/* 侧边栏样式 */
.sidebar {
  width: 250px;
  height: 100%;
  background-color: #ffffff;
  border-right: 1px solid #e0e0e0;
  flex-shrink: 0;
  overflow-y: auto;
  /* 侧边栏具体样式后续可根据需求设计 */
}

/* 主内容区域样式 */
.content {
  flex: 1;
  height: 100%;
  overflow-y: auto;
  padding: 20px;
}

/* 面包屑示例样式 */
.breadcrumb-demo {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: white;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.breadcrumb-demo h3 {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: #606266;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .sidebar {
    width: 200px;
  }
  
  .breadcrumb-demo {
    bottom: 10px;
    right: 10px;
    padding: 10px;
  }
}
</style>